<template>
  <div>
    子组件 展示
    <ul>
      <li v-for="item in list" :key="item.id">
        {{item.title}}
        <button @click="deleteItem(item.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import event from './event'
export default {
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    deleteItem (id) {
      this.$emit('delete', id)
    },
    addTitleHandler(title) {
      console.log('on add title', title)
    }
  },
  mounted() {
    // 绑定自定义事件
    event.$on('onAddTitle', this.addTitleHandler)
  },
  beforeDestroy() {
    console.log(111)
    event.$off('onAddTitle', this.addTitleHandler)
  }
}
</script>

<style>

</style>
